<template>
	<view class="wrapper">
		<view class="outer-ring" :style="outerRingStyle">
			<view class="inner-circle">
			    <span class="inner-text">{{centerText}}</span>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: "ringChart",
	data() {
		return {
			
		};
	},
    props: {
		ringValue: {
			type: Object,
			default: {
				purple: 1,
				green: 1,
				orange: 1,
				red: 1,
			}
		},
		centerText: {
			type: String,
			default: '0场'
		}
	},
	computed: {
		// 计算总值
		total() {
			return Object.values(this.ringValue).reduce((sum, value) => sum + value, 0);
		},
		// 外部圆环的样式
		outerRingStyle() {
			// 计算每个扇形的角度
			const purpleAngle = (this.ringValue.purple / this.total) * 360;
			const greenAngle = (this.ringValue.green / this.total) * 360;
			const orangeAngle = (this.ringValue.orange / this.total) * 360;
			const redAngle = (this.ringValue.red / this.total) * 360;
			// 使用 conic-gradient 创建圆环的效果
			return {
				background: `conic-gradient(
				#5470C6 ${0}deg ${purpleAngle}deg,
				#91CC75 ${purpleAngle}deg ${purpleAngle + greenAngle}deg,
				#FAC858 ${purpleAngle + greenAngle}deg ${purpleAngle + greenAngle + orangeAngle}deg,
				#EE6666 ${purpleAngle + greenAngle + orangeAngle}deg ${purpleAngle + greenAngle + orangeAngle + redAngle}deg
				)`,
			};
		},
	},
};
</script>

<style scoped lang="scss">
	.wrapper {
	    .outer-ring {
			width: 95px;
			height: 95px;
			border-radius: 50%;
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #ccc; /* 预设背景 */
			.inner-circle {
				width: 55px;
				height: 55px;
				border-radius: 50%;
				background-color: white;
				display: flex;
				justify-content: center;
				align-items: center;
				.inner-text {
					font-size: 12px;
					color: #333;
				}
			}
	    }
	}






</style>
